<template>
  <div>
    <!-- 面包导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>管理员管理</el-breadcrumb-item>
      <el-breadcrumb-item>管理员列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card style="margin-left:-1rem;margin-top:1rem">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入内容" clearable @clear="getUserList">
            <el-button slot="append" icon="el-icon-search" @click="getUserList()"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="addVisible = true">添加管理员</el-button>
        </el-col>
      </el-row>

      <!-- 用户列表区域 -->
      <el-table :data="userlist" border stripe style="margin-top:1rem">
        <el-table-column label="＃" type="index"></el-table-column>
        <el-table-column label="用户明" prop="name"></el-table-column>
        <el-table-column label="密码" prop="password"></el-table-column>
     
        <el-table-column label="操作" width="200px">
          <template slot-scope="scope"> 
            <el-button type="primary" icon="el-icon-edit" @click="update(scope.row.id)" size="mini"></el-button>
            <el-button type="danger" icon="el-icon-delete" @click="del(scope.row.id)" size="mini"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 添加用户对话框 -->
    <el-dialog
      title="添加管理员"
      :visible.sync="addVisible"
      width="50%" @close="addDialogClosed">
      <!-- 主题区 -->
      <el-form  :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px">
        <el-form-item prop="name" label="管理名">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
        <el-form-item prop="password" label="密码">
          <el-input v-model="addForm.password"></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部区 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addVisible = false">取 消</el-button>
        <el-button type="primary"  @click="onSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>    

<script>
import { setToken, setUserName } from "../../utils/auth";
import request from "../../utils/request";
export default {
  data(){
    return{
      userlist:[],
            //控制添加用户对话框的显示喝隐藏
         addVisible:false,
          Userlist:[],
           //添加用户的表单数据
          addForm:{
            name:'',
            password:''
        },
    }
  },
  created() {
    this.getUserList()
  },
  methods: {
     getUserList() {
      var that = this
     request({
        url: "/api/user/getAdminList",
        method: "post",
        data: {}
      }).then(res => {
        console.log(res)
       that.userlist = res.list;
        
      });
    },
     //添加管理员
    onSubmit() {
      const params = {
        name:this.addForm.name,
        password:this.addForm.password
     }
      request({
        url: "/api/user/addadmin",
        method: "post",
        data: params
      }).then(res => {
        if (res.msg === "新增成功") {
          this.$message({
            message: "恭喜你，新增成功",
            type: "success"
          });
          this.$router.push("/admin/welcome");
        }
      })
    },
    // 删除管理员
   del(id){
      // alert(id)
        request({
          url: "/api/user/getadminsdel",
          method: "post",
          data: {id:id}
        }).then(res => {
          location.reload();
          
        });
    },
    update(id){
       this.$router.push({path:"/admin/adminupdate",query:{id:id}});
    }
  }
}
</script>

<style lang="less" scoped>
</style>


